<template>
    <div class="kanban">
        <el-form :model="form" class="app-search" ref="searchForm">
            <el-input class="app-search-item" clearable placeholder="请输入类目名称查询" size="medium"
                      style="width:220px;"
                      v-model="form.name"
            />
            <el-button @click="fetchData(1)" class="app-search-item" icon="el-icon-search" size="medium"
                       type="primary"
            >
                搜索
            </el-button>
            <el-button @click="openEditDialog()" class="app-search-item" icon="el-icon-search" size="medium"
                       type="success"
            >
                新增
            </el-button>
        </el-form>
        <el-table :data="items" style="width: 100%">
            <el-table-column label="名称" prop="name">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.name}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="描述" prop="description">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.description}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" class-name="status-col" label="操作" width="250">
                <template slot-scope="scope">
                    <el-button @click="openEditDialog(scope.row)" size="mini" type="warning">编辑
                    </el-button>
                    <el-button @click="remove(scope.row.id)" size="mini" type="danger">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination :page-size="form.size" :total="form.total" @current-change="fetchData"
                           layout="prev, pager, next"
                           width="1000">
            </el-pagination>
        </div>

        <!-- dialog弹窗 -->
        <el-dialog :show-close="false" :title="editDialogData.title" :visible.sync="editDialogData.visible"
                   width="800px">
            <el-form :model="editDialogData" :rules="editRules" label-width="140px" ref="editCategory"
                     style="padding-right: 30px;">
                <el-form-item label="类目名称：" prop="name">
                    <el-input v-model="editDialogData.name"/>
                </el-form-item>
                <el-form-item label="类目描述：" prop="description">
                    <el-input :rows="3" type="textarea" v-model="editDialogData.description"/>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeEditDialog()" type="default">取消</el-button>
                <el-button @click="save('editCategory')" type="primary"> 确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    export default {
        name: 'Category',
        info: {},
        data() {
            return {
                form: {
                    page: 1,
                    size: 10,
                    total: 0,
                    name: '',
                },
                items: [],
                editDialogData: {
                    id: '',
                    name: '',
                    description: '',
                    visible: false,
                    title: '编辑商品类目',
                },
                editRules: {
                    name: [{required: true, message: '此项不能为空', trigger: 'blur'}],
                    description: [{required: true, message: '此项不能为空', trigger: 'blur'}]
                },
            }
        },
        methods: {
            fetchData(page) {
                if (page) {
                    this.form.page = page
                }
                this.$fetch('/goodsCategories?name=' + this.form.name)
                    .then(res => {
                        if (res.code === 0) {
                            this.items = res.data.records
                        } else {
                            this.$message.error(res.errorMsg)
                        }
                    })
            },
            openEditDialog(data) {
                if (data) {
                    this.editDialogData.id = data.id;
                    this.editDialogData.name = data.name;
                    this.editDialogData.description = data.description;
                    this.editDialogData.title = '编辑商品类目';
                } else {
                    this.editDialogData.id = null;
                    this.editDialogData.name = '';
                    this.editDialogData.description = '';
                    this.editDialogData.title = '新增商品类目';
                }
                this.editDialogData.visible = true;
            },
            closeEditDialog() {
                this.editDialogData = {
                    visible: false,
                    title: '编辑商品类目',
                    name: '',
                    description: ''
                }
            },
            save(formName) {
                this.$refs[formName].validate((valid) => {
                    if (!valid) {
                        this.$message({type: 'error', message: '请输入正确的数据!'});
                        return false
                    }
                    this.$post('/goodsCategory', {
                        id: this.editDialogData.id,
                        name: this.editDialogData.name,
                        description: this.editDialogData.description,
                    }).then(res => {
                        if (res.code === 1) {
                            this.$message({type: 'error', message: res.errorMsg});
                        } else {
                            this.$message({type: 'success', message: '编辑成功'});
                            this.closeEditDialog();
                            this.fetchData()
                        }
                    })
                })
            },
            remove(id) {
                this.$put('/goodsCategory/delete/' + id)
                    .then(res => {
                        if (res.code === 1) {
                            this.$message({type: 'error', message: res.errorMsg});
                        } else {
                            this.$message({type: 'success', message: '删除成功'});
                            this.fetchData()
                        }
                    })
            }
        },
        mounted() {
            this.fetchData()
        }
    }
</script>
<style>
    .block {
        display: -webkit-flex;
        display: flex;
        justify-content: flex-end;
        padding: 15px 30px;
    }

    .kanban {
        padding: 25px 25px;
    }

    .el-image-viewer__img {
        width: 120px;
        height: 120px;
    }

</style>
